<template>
  <div :class="['bc-card-header', $attrs.class]" v-bind="$attrs">
    <div :class="['bc-card-title', titleClassName, { [`bc-card-title-${statusType}`]: statusType }]">
      <slot name="title" />
    </div>
    <div v-if="$slots.extra" class="bc-card-extra">
      <slot name="extra" />
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  statusType: String,
  titleClassName: String,
});
</script>

<style lang="less">
.bc-card-header {
  display: flex;
  padding: var(--size-cell-gap-sm, 8px) var(--size-cell-gap, 16px);
}

.bc-card-title {
  flex: 1;
  font-size: 16px;

  &-bar,
  &-dot,
  &-circle {
    position: relative;

    &::before {
      content: '';
      position: absolute;
      box-sizing: border-box;
      top: 50%;
      left: 0;
      transform: translate(-50%, -50%);
    }
  }

  &-bar {
    padding-left: 8px;

    &::before {
      width: 0;
      height: 16px;
      border-radius: 8px;
      border: 2px solid var(--color-primary);
    }
  }

  &-dot {
    padding-left: 12px;
    &::before {
      top: 6px;
      width: 8px;
      height: 8px;
      border-radius: 4px;
      background: var(--color-primary);
    }
  }

  &-circle {
    &::before {
      width: 16px;
      height: 16px;
      border-radius: 8px;
      border: 2px solid var(--color-primary);
    }
  }

  &-tabs {
    flex: 1 0 0;

    .ant-tabs .ant-tabs-nav {
      margin-bottom: 0;
    }

    .ant-tabs .ant-tabs-tab {
      padding: 0;
      font-size: 16px;
    }

    .ant-tabs .ant-tabs-tab + .ant-tabs-tab {
      margin: 0 0 0 var(--size-cell-gap-lg);
    }

    .ant-tabs-top > .ant-tabs-nav::before,
    .ant-tabs-top > div > .ant-tabs-nav::before {
      display: none;
    }

    .ant-tabs > .ant-tabs-nav .ant-tabs-nav-wrap,
    .ant-tabs > div > .ant-tabs-nav .ant-tabs-nav-wrap {
      overflow: visible;
    }

    .ant-tabs-top > .ant-tabs-nav .ant-tabs-ink-bar,
    .ant-tabs-top > div > .ant-tabs-nav .ant-tabs-ink-bar {
      bottom: -8px;
    }
  }
}

.bc-card-extra {
  display: flex;
  justify-content: flex-end;

  &-fold {
    width: 100%;
    text-align: right;
    cursor: pointer;
  }
}
</style>
